<!-- 主播列表 -->
<template>
  <van-grid :column-num="3" gutter="3" :border="false">
    <van-grid-item
      v-for="(value, index) in props.dateItemDetail.imgList"
      :key="index"
    >
      <div
        :style="{ height: _height + 'px' }"
        ref="myElement"
        class="img-box"
        v-if="value.indexOf('.mp4') == -1"
      >
        <van-image
          :src="value + '?x-oss-process=image/resize,w_100,h_200'"
          fit="cover"
          @load="imgLoad($event, index)"
          @click="ViewFile(props.dateItemDetail, index)"
        />
      </div>
      <div
        :style="{ height: _height + 'px' }"
        class="img-box"
        @click="ViewFile(props.dateItemDetail, index)"
        v-else
      >
        <div class="start-video">
          <van-icon name="play-circle" size="2em" color="rgba(0,0,0,.8)" />
        </div>
        <video :src="value" :poster="value"></video>
      </div>
    </van-grid-item>
    <van-grid-item
      v-if="
        props.dateItemDetail.photo.length > 9 &&
        props.dateItemDetail.imgList.length == 8
      "
    >
      <div class="more-box" @click="morePhoto(props.dateItemDetail)">
        <span>查看更多</span>
      </div>
    </van-grid-item>
  </van-grid>
  <van-image-preview
    v-model:show="show"
    :images="images"
    :close-on-click-image="false"
    :close-on-click-overlay="false"
    :startPosition="startPosition"
    :closeable="true"
  >
    <template #image="{ src, style, onLoad }">
      <div class="view-box">
        <van-image
          v-if="!(src.indexOf('.map4') > 0)"
          :style="[{ width: '100%' }, style]"
          fit="cover"
          position="center"
          :src="src"
          @load="onLoad"
        />
        <div class="video-box" v-else>
          <video controls>
            <source :src="src" type="video/mp4" />
          </video>
        </div>
      </div>
    </template>
  </van-image-preview>
</template>
<script setup>
import { ref } from "vue";

import { useRouter } from "vue-router";
const router = useRouter();

const myElement = ref(null);
const emit = defineEmits(["MorePhoto"]);
const props = defineProps({
  dateItemDetail: {
    type: Object,
    default: () => {},
  },
});

let show = ref(false);
let images = ref([]);
let startPosition = ref(0);

const ViewFile = (item, i) => {
  images.value = item.imgList;
  startPosition.value = i;
  show.value = true;
};

let _height = ref(100);
const imgLoad = (ev, i) => {
  if (myElement.value.length) {
    _height = myElement.value[0].offsetWidth;
  }
};

const morePhoto = (item) => {
  emit("MorePhoto", item.id);
};
</script>


<style lang="scss" scoped>
.van-image {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.view-box {
  :deep(.van-image) {
    // max-width: 90vw;
    // max-height: 75vh;
    display: flex;
    justify-content: center;
    // border-radius: 4px;
  }
}

:deep(.van-grid-item__content) {
  width: 100%;
  padding: 0 !important;
}

.img-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  border-radius: 4px;
  overflow: hidden;
  position: relative;

  .start-video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  video {
    width: 100%;
    max-width: 75vw;
  }
}

.video-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  video {
    max-width: 75vw;
    border-radius: 8px;
  }
}
.more-box {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}
</style>
